<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="shortcut icon" href="__STATIC__/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="__STATIC__/css/font.css">
    <link rel="stylesheet" href="__STATIC__/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="__STATIC__/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="__STATIC__/js/xadmin.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=QOZWOd8ibC5ycpFhge8oVux01j6KbmAE"></script>
    <!--<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=pyolgun1F2GuEmACvOYGPjtnsDmRmMrb"></script>-->
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->
</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">店铺管理</a>
        <a>
          <cite>店铺详情</cite></a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">&#xe666;</i></a>
</div>
<div class="x-body">
    <div class="layui-row">
    <form class="layui-form layui-col-md12 x-so" style="text-align: center">
        <div class="layui-input-inline">
            <select name="shop_id" lay-filter="shop_id">
                <option value="0">请选择店铺</option>
                {volist name="data.list" id="vo"}
                <option value="{$vo.id}">{$vo.shop_name}</option>
                {/volist}
            </select>
        </div>
        <button class="layui-btn"  lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
    </form>
</div>
    <div class="layui-row">
        <div class="layui-col-md4">
            <form class="layui-form" id="form1">
                <div class="layui-form-item">
                    <label for="shop_name" class="layui-form-label">
                        <span class="x-red">*</span>店铺名称
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="shop_name" name="shop_name" required="" lay-verify="required"
                               autocomplete="off" class="layui-input">
                        <input type="hidden" name="id" value="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="shop_admin" class="layui-form-label">
                        <span class="x-red">*</span>店铺负责人
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="shop_admin" name="shop_admin" required="" lay-verify="required"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="phone" class="layui-form-label">
                        <span class="x-red">*</span>电话
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="phone" name="phone" required="" lay-verify="required"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="shop_introduce" class="layui-form-label">
                        <span class="x-red">*</span>店铺介绍
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="shop_introduce" name="shop_introduce" required="" lay-verify="required"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item" id="img">
                    <label for="image" class="layui-form-label">
                        <span class="x-red">*</span>logo图片
                    </label>
                    <button type="button" class="layui-btn" id="image">
                        <i class="layui-icon">&#xe67c;</i>选择图片
                    </button>
                    <img src="" width='150px'/>
                    <input name="shop_image" value="" type="hidden"/>
                </div>
                <div class="layui-form-item" id="ad_img">
                    <label for="ad_image" class="layui-form-label">
                        <span class="x-red">*</span>宣传图片
                    </label>
                    <button type="button" class="layui-btn" id="ad_image">
                        <i class="layui-icon">&#xe67c;</i>选择图片
                    </button>
                    <img src="" width='150px'/>
                    <input name="ad_image" value="" type="hidden"/>
                </div>
                <div class="layui-form-item">
                    <label for="address" class="layui-form-label">
                        <span class="x-red">*</span>地址
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="address" name="address" required="" lay-verify="required"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label  class="layui-form-label">
                        <span class="x-red">*</span>经纬度
                    </label>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="text" id="w" name="longitude" placeholder="Lon" required="" lay-verify="required"
                               autocomplete="off" class="layui-input" readonly="readonly">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="text" id="n" name="latitude" placeholder="Lat" required="" lay-verify="required"
                               autocomplete="off" class="layui-input" value="" readonly="readonly">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="sort" class="layui-form-label">
                        <span class="x-red">*</span>排序
                    </label>
                    <div class="layui-input-inline">
                        <input type="number" id="sort" name="sort" required="" lay-verify="required"
                               autocomplete="off" value="" class="layui-input" >
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <div id="status1" class="layui-input-inline" style="width: 100px;">
                        <input id="shop_status" type="checkbox" name="shop_status" value="1" lay-skin="switch" lay-text="上线|下线">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>营业时间
                    </label>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input class="layui-input" placeholder="开始时间" name="start" id="start" lay-verify="required">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input class="layui-input" placeholder="截止时间" name="end" id="end" lay-verify="required">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label for="desc" class="layui-form-label">
                        店铺公告
                    </label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入内容" id="desc" name="desc" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                    </label>
                    <button class="layui-btn" lay-filter="add" lay-submit="">
                        修改
                    </button>
                </div>
            </form>
        </div>
        <div class="layui-col-md6">
            <div id="allmap" style="width: 100%;height: 500px"></div>
        </div>
    </div>
</div>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom("西安市",12);
    var heng=$("#w").val();
    var zong=$("#n").val();
    var point = new BMap.Point(heng,zong);
    var marker = new BMap.Marker(new BMap.Point(heng,zong));
    var geoc = new BMap.Geocoder();
    map.addOverlay(marker);
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    //单击获取点击的经纬度
    map.addEventListener("click",function(e){
        map.clearOverlays();
        var pt = e.point;
        $("#w").val(e.point.lng);
        $("#n").val(e.point.lat);
        geoc.getLocation(pt, function(rs){
            var addComp = rs.addressComponents;
            $("#address").val(addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber);
            // alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
        });
        // 百度地图API功能
        var point = new BMap.Point(e.point.lng,e.point.lat);
        var marker = new BMap.Marker(new BMap.Point(e.point.lng,e.point.lat)); // 创建点
        //添加覆盖物
        map.addOverlay(marker);            //增加点
    });




    $("#address").blur(function(){
        // 创建地址解析器实例
        var data = $("#address").val();
        var myGeo = new BMap.Geocoder();
        // 将地址解析结果显示在地图上,并调整地图视野
        myGeo.getPoint(data, function(point){
            if (point) {
                map.centerAndZoom(point, 16);
                $("#w").val(point.lng);
                $("#n").val(point.lat);
                map.addOverlay(new BMap.Marker(point));
            }else{
                alert("您输入地址没有解析到结果!");
            }
        }, "西安市");
    });
    layui.use(['form', 'layer','upload','laydate'], function () {
        $ = layui.jquery;
        var form = layui.form
            , layer = layui.layer
            ,upload = layui.upload
            ,laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
            ,type:'time'
            ,min: '00:00:00'
            ,max: '24:00:00'
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
            ,type:'time'
            ,min: '00:00:00'
            ,max: '24:00:00'
        });
        var uploadInst = upload.render({
            elem: '#image' //绑定元素
            ,url: '{:url("shop/shopImage")}' //上传接口
            ,done: function(res){
                $('#img').children("img").remove();
                $('#img').children('input[name="shop_image"]').remove();
                $('#img').children(".shop_image").remove();
                $('#img').append("<img src='"+res.filename+"' width='150px' alt='...'>");
                $('#img').append("<input class='shop_image' value='"+res.filename+"'name='shop_image'type='hidden'>");
            }
            ,error: function(){
                //请求异常回调
            }
        });
        var uploadInst = upload.render({
		    elem: '#ad_image' //绑定元素
		    ,url: '{:url("shop/shopImage")}' //上传接口
		    ,done: function(res){
		        //console.log(res.filename);
		         $('#ad_img').children('img').remove();
		         $('#ad_img').children('input[name="ad_image"]').remove();
		         $imgstr='<img src="'+res.filename+'" width="150px" height="60px"><input type="hidden" value="'+res.filename+'" name="ad_image">';
		         $('#ad_img').children('button').after($imgstr);
		    }
		    ,error: function(){
		      //请求异常回调
		    }
		 });
        form.on('select(shop_id)', function(data){
            if (data.value == 0){
                return false;
            }
        });
        form.on('submit(sreach)',function (data) {
        	//console.log(data);
            $.post('{:url("shop/shopData")}',data.field,function (res) {
                console.log(res.shop_ad_image);
                $('input[name="shop_name"]').val(res.shop_name);
                $('input[name="shop_admin"]').val(res.shop_admin);
                $('input[name="shop_introduce"]').val(res.shop_introduce);
                $('input[name="phone"]').val(res.phone);
                $('input[name="address"]').val(res.address);
                $('input[name="longitude"]').val(res.longitude);
                $('input[name="latitude"]').val(res.latitude);
                $('input[name="sort"]').val(res.sort);
                $('#desc').val(res.notice);
                $('input[name="start"]').val(res.start);
                $('input[name="end"]').val(res.end);
                $('input[name="id"]').val(res.id);
                $('#img').children('img').attr('src',res.shop_image);
                $('#img').children('input[name="shop_image"]').val(res.shop_image);
                $('#ad_img').children('img').attr('src',res.shop_ad_image);
                $('#ad_img').children('input[name="ad_image"]').val(res.shop_ad_image);
                if(res.status==1){
                	$('#shop_status').attr("checked",true);
                    form.render("checkbox");
                }
            });
            return false;
        });
        $("#status1>.layui-unselect").on('click',function(){
            if($("#shop_status").is(':checked')){
                $("[name=shop_status]:checkbox").attr("checked", true);
            }else{
                $("[name=shop_status]:checkbox").removeAttr("checked");
            }
        });
        //监听提交
        form.on('submit(add)', function (data) {
            var formData = $("#form1").serializeArray();
            var shopid=$('.id').val();
            if (!$("#shop_status").prop('checked')){
                formData.push({name:"shop_status",value:"0"});
            }
            if (!$("#business_status").prop('checked')){
                formData.push({name:"business_status",value:"0"});
            }
            //console.log(formData);
            $.post('{:url("shop/edit")}',formData,function (res) {
            	console.log(res);
                if (res == true){
                    layer.alert('修改成功', {icon: 6}, function () {
                        location=location;
                    });
                }else {
                    layer.msg('修改失败', {icon: 5});
                }
            });
            return false;
        });
    });

    function mapedit() {
        map.clearOverlays();
        var new_point = new BMap.Point($("#w").val(),$("#n").val());
        var marker = new BMap.Marker(new_point);  // 创建标注
        map.addOverlay(marker);              // 将标注添加到地图中
        map.panTo(new_point);
    }
</script>
</body>
</html>